<template>
  <div class="content-container" style="position: relative">
     <div class="panel">
       <img class="system-wq-icon" src="@/assets/wq.png"></img>

       <div style="height: 10px"></div>
       <table id="hot-table" style="overflow: hidden">
         <tr>
           <th style="width: 100px">序号</th>
           <th style="width: 400px">机构名称</th>
           <th style="width: 200px">咨询热线</th>
           <th style="width: 800px">地址</th>
         </tr>
         <tr  v-for="(item,index) in list" :key="index" >
           <td>{{index+1}}</td>
           <td class="zcjgmc">{{item.zcjgmc}}</td>
           <td class="zcjgdh">{{item.zcjgdh}}</td>
           <td class="zcjgdz">{{item.zcjgdz}}</td>
         </tr>
       </table>
       <empty-data-panel v-if="list.length==0"></empty-data-panel>

     </div>

  </div>
</template>

<script>
import {laborRightsApi} from "@/api";
import ReturnBtn from "@/views/components/ReturnBtn.vue";

export default {
  name: "hot-line",
  components:{
    ReturnBtn
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.queryInstitution()
  },
  methods: {
    queryInstitution(){
      laborRightsApi.queryInstitution({limit:100,page:1}).then((res) => {
        this.list=res.data.records
      }).catch(()=>{

      })
    }
  }
}
</script>
<style scoped lang="scss">
 .panel{
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    color: white;
    overflow-y: auto;  
    .system-wq-icon {
      width: 180px;
      z-index: 1;
      left: 10px;
      top: 320px;
      position: fixed;
    }  
   .bg{
     width: 500px;
     z-index: -1;
     left: 70px;
     top: 100px;
     position: absolute;
   }
   .title{
     border-radius: 10px;
     width: 100%;
     height: 80px;
     font-size: xxx-large;

     background-color: #52489C;
   }
   #hot-table
   {
     border-radius: 16px;
     box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
     margin-left: auto;
     margin-right: auto;
     border-collapse: collapse;
     border-radius: 5px;
     td{
       border-bottom: 1px solid #409eff;
       padding: 10px 20px 10px 20px;
       background-color: rgba(82, 72, 156,0.2);
       color: #eff1f5;
       font-size: 18px;
     }
     th{
        border-bottom: 1px solid #409eff;
        background-color: rgba(82, 72, 156,0.2);
        font-size: 16px;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
        color: #eff1f5;
     }

   }

   .list-item{
     .zcjgmc{
       font-size: larger;
       margin-left: 20px;
       text-align: left;
       width: 400px;
     }
     .zcjgdh-label{
       margin-left: 20px;
        img{
          height: 30px;
          margin-top: 5px;
        }
     }
     .zcjgdh{
       margin-left: 5px;
       text-align: left;
       width: 200px;
     }
     .zcjgdz-label{
       margin-left: 20px;
     }
     .zcjgdz{
       margin-left: 5px;
     }
   }


 }
</style>
